<!-- 表格组件 -->
<template>
  <el-col
    style="margin-left: 20px; margin-right: 20px; display: flex; justify-content: space-between; align-items: center"
  >
    <el-col :span="4">
      <h4>查询结果列表</h4>
    </el-col>
    <el-col :span="4">
      <el-button class="button">新增</el-button>
      <el-button class="button">打印</el-button>
      <el-button class="button">导出</el-button>
    </el-col>
  </el-col>
  <el-col>
    <el-table
      :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      style="width: 1620px; margin-left: 20px; margin-right: 20px"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
      height="600"
      :header-cell-style="{
        background: '#07b274',
        color: 'white',
        fontWeight: 'lighter',
        borderRight: '1px solid white'
      }"
    >
      <!-- 是否需要多选框列表 -->
      <template v-if="showSelectColumn">
        <el-table-column type="selection" width="55" align="center" />
      </template>
      <!-- 是否需要序号列表 -->
      <template v-if="showIndexColumn">
        <el-table-column prop="serialNumber" label="序号" width="90" align="center" />
      </template>
      <!-- propList里的所有列 -->
      <template v-for="item in propList" :key="item.prop">
        <el-table-column v-bind="item">
          <!-- 传有slotName时展示的插槽列 -->
          <template #default="scope" v-if="item.slotName">
            <slot :name="item.slotName" :row="scope.row"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-col style="margin-right: 20px; margin-top: 20px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :background="background"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-col>
  <el-col style="height: 100px"> </el-col>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { defineProps, withDefaults, defineEmits } from 'vue'
import { ITableOption } from '../../configfile/configtype'
// import { useStore } from '@/store'
// const store = useStore()
interface Props {
  tableData: any[] //表单数据
  propList: ITableOption[] //表单配置项
  showIndexColumn?: boolean //是否显示索引列
  showSelectColumn?: boolean //是否显示全选列
  childrenProps?: object // 是否有子数据，树形数据才用得到
}
const props = withDefaults(defineProps<Props>(), {
  // showIndexColumn: false,
  // showSelectColumn: true,
  childrenProps: () => ({})
})
console.log('asdsdsadsadsa', props)
interface User {
  serialNumber: number
  id: number
  name: string
  coding: string
  permissionCharacter: string
  sequence: number
  state: boolean
  creationTime: string
}
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const tableRowClassName = ({ row, rowIndex }: { row: User; rowIndex: number }) => {
  if (rowIndex % 2 === 1) {
    return 'success-row'
  }
  return ''
}
</script>

<style scoped>
.fs-16 {
  font-size: 16px;
}

:deep(.el-table .success-row) {
  --el-table-tr-bg-color: #e5f7f1;
  border: none;
}
/* :deep(.el-table__row > td) {
  border: none;
} */
/* 去掉table 最底部的线 */
.el-table {
  --el-border-color-lighter: none;
}
.button {
  background-color: #00a468;
  color: white;
  padding: 18px 23px;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
</style>
